<template>
  <el-container :class="showSearch ? 'app-container' : 'app-container app-container-full'">
    <el-aside width="250px">
      <el-card>
        <el-input
          placeholder="请输入文件夹名称"
          v-model="filterFolder"
          clearable
          size="small"
        >
        </el-input>
        <el-tree
          class="folder-tree"
          :data="folderList"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          @node-click="handleCurrentFolder"
          :highlight-current="true"
          :default-expand-all="true"
          check-strictly
          node-key="id"
          ref="tree"
        >
          <span slot-scope="{ node,data }">
             <i class="el-icon-folder" style="padding-left: 3px"></i> {{ node.label }}
          </span>
        </el-tree>
      </el-card>
    </el-aside>
    <el-container>
      <el-header v-show="showSearch">
        <el-card class="query-card" v-show="showSearch">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="文件名称" prop="fileName">
              <el-input
                v-model="queryParams.fileName"
                placeholder="请输入文件名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="文件上传用户" prop="userId">
              <el-select v-model="queryParams.userId" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in userOptions"
                  :key="index"
                  :value="item.userId"
                  :label="item.nickName"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-header>
      <el-main>
        <el-card class="table-card">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete"
                v-hasPermi="['file:folder:delete']"
                :disabled="fileIds.length < 1 && selectFiles.length < 1"
              >删除</el-button>
              <el-button
                type="primary"
                plain
                icon="el-icon-upload2"
                size="mini"
                v-hasPermi="['file:file:upload']"
                v-show="!dvShowUploadBtn"
                class="upload-file-uploader"
                @click="checkUpload"
              >上传文件</el-button>
              <el-upload
                multiple
                :action="uploadFileUrl"
                :before-upload="handleBeforeUpload"
                :file-list="uploadFileList"
                :limit="limit"
                :on-error="handleUploadError"
                :on-exceed="handleExceed"
                :on-success="handleUploadSuccess"
                :on-change="getFileList"
                :show-file-list="false"
                :headers="headers"
                class="upload-file-uploader"
                ref="upload"
                v-show="dvShowUploadBtn"
              >
                <!-- 上传按钮 -->
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-upload2"
                  size="mini"
                  v-hasPermi="['file:file:upload']"
                >上传文件</el-button>
              </el-upload>
              <el-button
                type="primary"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click="handleImageCopper"
                v-hasPermi="['file:file:upload']"
              >上传并裁剪图片</el-button>
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['file:file:export']"
              >导出</el-button>
              <el-button
                type="primary"
                plain
                :icon="dvViewModel ? 'el-icon-data-board' : 'el-icon-notebook-2'"
                size="mini"
                @click="handleViewModel"
              >{{ dvViewModel ? '详细信息' : '大图标'}}</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getFolderList"></right-toolbar>
          </el-row>

          <!-- 大图展示 -->
          <div :class="showSearch ? 'image-container' : 'image-container-full'" v-if="dvViewModel">
            <div :class="showSearch ? 'show-image' : 'show-image show-image-all'" id="show-image-container">
              <template v-for="(item, index) in fileList">
                <div class="block" :id="'block' + index">
                  <!-- 内容区域 -->
                  <el-image
                    v-if="['mp3','wma', 'flac'].includes(item.fileExtName)"
                    @click="handleSelectChange(item, index)"
                    :class="{ 'image-info': selectFiles.includes(item.id) }"
                    style="width: 150px; height: 150px;"
                    :src="require('@/assets/images/music.jpg')"
                    fit="cover"
                  ></el-image>
                  <el-image
                    v-else
                    @click="handleSelectChange(item, index)"
                    :class="{ 'image-info': selectFiles.includes(item.id) }"
                    style="width: 150px; height: 150px;"
                    :src="item.fileUrl"
                    fit="cover"
                  ></el-image>
                  <span class="demonstration">{{ item.fileName }}</span>
                  <!-- 右键菜单区域 -->
                  <context-menu
                    :target="contextMenuTarget[index]"
                    :show="contextMenuVisible[index]"
                    @update:show="(show) => (contextMenuVisible[index] = show)"
                    class="right-menu"
                  >
                    <a href="javascript:;" @click="handlePreview(item)">
                      <i class="el-icon-view"></i><b> {{ ['mp3','wma', 'flac'].includes(item.fileExtName) ? '播放音乐' : '查看图片' }}</b>

                    </a>
                    <a v-if="!['mp3','wma', 'flac'].includes(item.fileExtName)" href="javascript:;" @click="handleImageCopper(item)">
                      <i class="el-icon-scissors"></i><b> 裁剪图片</b>
                    </a>
                    <a href="javascript:;" @click="handleDelete(item)">
                      <i class="el-icon-delete"></i><b> 删除文件</b>
                    </a>
                  </context-menu>
                </div>
                <br v-if="(index + 1) % 5 === 0"/>
              </template>
            </div>
          </div>
          <!-- 详细信息 -->
          <vxe-table
            v-if="!dvViewModel"
            v-loading="loading"
            resizable
            :data="fileList"
            :class="showSearch ? 'table-container' : 'table-container-full' "
            @checkbox-all="handleSelectionChange"
            @checkbox-change="handleSelectionChange"
            :row-config="{isHover: true}"
          >
            <vxe-column type="checkbox" width="60" fixed="left" align="center"></vxe-column>
            <vxe-column title="序号" align="center" type="seq" min-width="60"/>
            <vxe-column title="文件名称" field="fileName" align="center" min-width="250"/>
            <vxe-column title="文件夹" field="folderName" header-align="center" min-width="270"/>
            <vxe-column title="文件大小" field="fileSize" align="center" min-width="150" :formatter="fileSizeFormatter"/>
            <vxe-column title="存储方式" align="center" field="storagePlace" min-width="150">
              <template v-slot="scope">
                <dict-tag :options="dict.type.sys_file_storage_place" :value="scope.row.storagePlace"/>
              </template>
            </vxe-column>
            <vxe-column title="上传用户" align="center" field="userId" min-width="150" :formatter="userIdFormatter"/>
            <vxe-column title="创建时间" align="center" field="createTime" min-width="150">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </vxe-column>
            <vxe-column title="操作" align="center" min-width="180" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-download"
                  @click="handleDownload(scope.row)"
                  v-hasPermi="['file:folder:download']"
                >下载</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView(scope.row)"
                  v-hasPermi="['file:folder:view']"
                >预览</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['file:folder:remove']"
                >删除</el-button>
              </template>
            </vxe-column>
          </vxe-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getFileList"
          />
        </el-card>
      </el-main>
    </el-container>
    <!-- 预览  -->
    <el-dialog
      :visible.sync="previewVisible"
      v-if="previewVisible"
      :title="previewFile.fileName"
      width="70%"
      class="preview-dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      v-drag-zoom
    >
      <div v-if="['mp3','wma', 'flac'].includes(previewFile.fileExtName)" class="preview-container">
        <el-image
          v-if="['mp3','wma', 'flac'].includes(previewFile.fileExtName)"
          style="width: 200px; height: 200px;"
          :src="require('@/assets/images/music.jpg')"
          :fit="'cover'"
        >{{ previewFile.fileName }}</el-image>
        <div class="audio-player">{{ previewFile.fileName }}</div>
        <audio class="audio-player" :src="previewFile.fileUrl" :autoplay="previewVisible" controls="controls" />
      </div>
      <div class="preview-container" v-else>
        <el-image
          :src="previewFile.fileUrl"
          :fit="'contain'"
          style="margin: auto"
        />
      </div>
    </el-dialog>
    <!-- 图片裁剪弹框 -->
    <base-image-cropper v-if="imageCopperVisible" :visible.sync="imageCopperVisible" :image-url="cropperImageUrl" :file-path="uploadFolder" @afterUpload="afterUpload" :fixed-box="false"/>
    <!-- 右键菜单区域 -->
<!--    <context-menu
      :target="contextMenuTarget"
      :show="contextMenuVisible"
      @update:show="(show) => (contextMenuVisible = show)"
      class="right-menu"
    >
      <a href="javascript:;" @click="handlePreview">
        <i class="el-icon-view"></i><b> 预览文件</b>

      </a>
      <a v-if="dvFileType === 'image'" href="javascript:;" @click="handleImageCopper">
        <i class="el-icon-scissors"></i><b> 裁剪图片</b>
      </a>
    </context-menu>-->
  </el-container>
</template>
<script>
import { listFolder } from '@/api/file/folder'
import { delFile, listFile } from '@/api/file/file'
import { queryUserSelect } from '@/api/system/user'
import { getToken } from '@/utils/auth'
import BaseImageCropper from '@/components/BaseImageCropper/index.vue'
import {Message, MessageBox, Notification} from "element-ui";
import store from "@/store";

export default {
  name: 'File',
  components: {
    BaseImageCropper
  },
  dicts: ['sys_file_storage_place'],
  watch: {
    filterFolder(val) {
      this.$refs.tree.filter(val);
    },
    rowIndex(newVal, oldVal) {
      this.rightClickEvent(newVal);
    }
  },
  data() {
    return {
      filterFolder: '',
      fileList: [],
      defaultProps: {
        children: 'children',
        label: 'folderName'
      },
      folderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileName: '',
        userId: '',
        folder: ''
      },
      showSearch: true,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 选中的文件id列表
      fileIds: [],
      loading: true,
      // 总条数
      total: 0,
      // 用户列表
      userOptions: [],
      // 展示模式，默认大图
      dvViewModel: true,
      // 选中的图片id
      selectFiles: [],
      // 预览弹框显示状态
      previewVisible: false,
      // 预览文件url
      previewFile: {},
      /** 文件上传属性 */
      // 上传的文件列表回显数据
      uploadFileList: [],
      // 文件上传成功列表
      resultList: [],
      // 上传文件数量记录
      number: 0,
      // 文件上传接口
      baseUploadUrl: process.env.VUE_APP_BASE_API + "/file/file/upload?path=",
      // 上传文件的服务器完整地址
      uploadFileUrl: '',
      // 上传的文件夹
      uploadFolder: '',
      // 上传文件请求头
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 允许上传的文件类型
      fileType: ["png", "jpg", "jpeg", 'blob', "doc", "xls", "ppt", "txt", "pdf", 'mp3','wma', 'flac'],
      // 允许上传的文件最大大小, 单位为M
      fileSize: 40,
      // 单次允许上传的最大文件数量
      limit: 5,
      // 图片文件类型
      imageFileType: ["png", "jpg", "jpeg", 'blob'],
      // 是否展示图片裁剪弹框
      imageCopperVisible: false,
      /** 右键菜单 */
      contextMenuTarget: [],
      // 右键菜单显示状态
      contextMenuVisible: [],
      // 文件类型
      dvFileType: '',
      // 当前数据行号
      rowIndex: null,
      // 裁剪的图片地址
      cropperImageUrl: '',
      // 上传按钮显示状态
      dvShowUploadBtn: false
    }
  },
  async created() {
    await this.getFolderList();
    await this.getUserList();
    await this.getFileList();
  },
  methods: {
    /** 文件夹过滤 */
    filterNode(value, data) {
      if (!value) return true;
      return data.folderName.indexOf(value) !== -1;
    },
    /** 获取用户列表 */
    async getUserList() {
      queryUserSelect([]).then(res => {
        this.userOptions = res.data;
      })
    },
    /** 查询文件夹列表 */
    async getFolderList() {
      listFolder().then(response => {
        this.folderList = this.handleTree(response.data, "folderCode", "parentCode");
      });
    },
    /** 获取文件列表 */
    async getFileList() {
      this.loading = true;
      listFile(this.queryParams).then(res => {
        this.contextMenuTarget = [];
        this.contextMenuVisible = [];
        this.fileList = res.rows;
        this.total = res.total;
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.selectFiles = [];
      this.getFileList();
    },
    /** 处理选择的文件夹 */
    handleCurrentFolder(data, node, curr) {
      this.resetForm("queryForm");
      this.queryParams.folder = data.pathCode;
      this.uploadFolder = this.queryParams.folder;
      this.uploadFileUrl = this.baseUploadUrl + this.uploadFolder;
      this.selectFiles = [];
      this.dvShowUploadBtn = true;
      this.handleQuery();
    },
    /** 重置 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let ids = row.id || this.fileIds;
      if (ids instanceof Array && ids.length < 1) {
        ids = this.selectFiles
      }
      this.$modal.confirm('是否确认删除"' + ids + '"的数据项？').then(function() {
        return delFile(ids);
      }).then(() => {
        this.getFileList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('file/file/export', {
        ...this.queryParams
      }, `file_${new Date().getTime()}.xlsx`)
    },
    /** 预览文件 */
    handleView(row) {
      window.open(row.fileUrl);
    },
    /** 下载文件 */
    handleDownload(row) {
      fetch(row.fileUrl).then(res => res.blob()).then(blob => {
        // 将链接地址字符内容转变成blob地址
        const a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = row.fileName
        // 下载文件的名字
        document.body.appendChild(a)
        a.click()
      })
    },
    /** 多选框选中数据 */
    handleSelectionChange(row) {
      this.selectFiles = []
      this.fileIds = row.records.map(item => item.id)
    },
    /** 用户格式化 */
    userIdFormatter({ cellValue, row, column }) {
      if (cellValue !== '' && cellValue !== null && cellValue !== undefined ) {
        const users = this.userOptions.filter(model => model.userId + "" === cellValue);
        if (users.length > 0) {
          return users[0].nickName
        }
      } else {
        return ''
      }
    },
    /** 文件大小格式化 */
    fileSizeFormatter({ cellValue, row, column }) {
      if (cellValue !== '' && cellValue !== null && cellValue !== undefined) {
        let temp;
        if (cellValue < 1024) {
          return cellValue + 'B';
        } else if (cellValue < (1024*1024)) {
          temp = cellValue / 1024
          temp = temp.toFixed(2);
          return temp + 'KB';
        } else if (cellValue < (1024*1024*1024)) {
          temp = cellValue / (1024 * 1024)
          temp = temp.toFixed(2);
          return temp + 'MB';
        } else {
          temp = cellValue / (1024*1024*1024)
          temp = temp.toFixed(2);
          return temp + 'GB';
        }
      } else {
        return '0B'
      }
    },
    /** 切换展示模式 */
    handleViewModel() {
      this.dvViewModel = !this.dvViewModel
      this.selectFiles = []
    },
    /** 图片选中 */
    handleSelectChange(item, index, event) {
      this.fileIds = []
      if (this.selectFiles.includes(item.id)) {
        this.selectFiles.splice(this.selectFiles.indexOf(item.id), 1);
      } else {
        this.selectFiles.push(item.id)
      }
      this.dvFileType = this.imageFileType.includes(item.fileExtName) ? 'image' : 'music';
      this.rowIndex = index;
    },
    rightClickEvent(index) {
      this.$nextTick(() => {
        // 挂载右键菜单
        this.contextMenuTarget[index] = document.querySelector('#block' + index);
        // 获取所有的 .blog ，循环监听右键事件
        const images = document.querySelectorAll('#block' + index + ' .el-image');
        images.forEach(i => {
          i.addEventListener('contextmenu', evt => {
            this.contextMenuVisible[index] = true;
            event.target.click();
          }, true);
        })
      })
    },
    /** 预览文件 */
    handlePreview(item) {
      this.previewFile = item
      this.previewVisible = true
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      if (this.queryParams.folder === '') {
        this.$modal.msgError("请选择上传的文件夹!");
        return false;
      }
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      return true;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
      this.uploadFileList = [];
      this.number = 0;
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading()
    },
    // 上传成功回调
    handleUploadSuccess(res) {
      const code = res.code;
      const msg = res.msg;
      if (code === 401) {
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        })
      } else if (code === 500) {
        Message({
          message: msg,
          type: 'error'
        })
        this.uploadFileList = [];
        this.number = 0;
      } else if (code !== 200) {
        Notification.error({
          title: msg
        })
        this.uploadFileList = [];
        this.number = 0;
      } else {
        debugger
        this.resultList.push({ name: res.data.url, url: res.data.url });
        if (this.resultList.length === this.number) {
          this.uploadFileList = [];
          this.resultList = [];
          this.number = 0;
          this.$modal.msgSuccess("上传文件成功！");
        }
      }
      this.$modal.closeLoading();
    },
    /** 打开图片裁剪弹框 */
    handleImageCopper(item) {
      if (this.queryParams.folder === '') {
        this.$modal.msgError("请选择上传的文件夹!");
      } else {
        this.cropperImageUrl = item.fileUrl;
        this.imageCopperVisible = true;
      }
    },
    /** 文件上传成功之后的回调 */
    afterUpload(url) {
      this.imageCopperVisible = false;
      this.getFileList();
    },
    /** 上传提示 */
    checkUpload() {
      this.$modal.msgError("请选择上传的文件夹!");
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 85px);
  ::v-deep .el-tree {
    height: calc(100vh - 191px);
  }
  ::v-deep .el-header {
    height: auto !important;
    padding-right: 0 !important;
  }
  ::v-deep .el-aside {
    padding: 0px !important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px !important;
    .el-card__body {
      padding: 10px !important;
    }
  }
  ::v-deep .el-divider {
    margin: 0px !important;
  }
  ::v-deep .el-main {
    height: calc(100vh - 200px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    .el-card__body {
      height: calc(100vh - 205px);
    }
  }
}
.app-container-full {
  ::v-deep .el-main {
    height: calc(100vh - 122px) !important;
    .el-card__body {
      height: calc(100vh - 127px) !important;
    }
  }
}
.folder-tree {
  margin-top: 10px;
}
.image-container {
  height: calc(100vh - 326px);
}
.image-container-full {
  height: calc(100vh - 248px);
}
::v-deep .show-image {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  max-height: calc(100vh - 315px);
  overflow-y: scroll;
  .block {
    margin: 15px;
    .demonstration {
      display: block;
      max-width: 150px;
      overflow: hidden;
    }
  }
  .image-info {
    width: 150px;
    height: 150px;
    color: #4abe84;
    box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
    border-radius: 7px;
    border: 1px solid rgba(74, 190, 132, 1);
  }
  .image-info:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 17px solid #4abe84;
    border-top-color: transparent;
    border-left-color: transparent;
  }
  .image-info:after {
    content: "";
    width: 5px;
    height: 12px;
    position: absolute;
    right: 6px;
    bottom: 6px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
  }
  .el-image {
    box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
    border-radius: 7px;
  }
}
.show-image-all {
  max-height: calc(100vh - 240px);
}
::v-deep .table-container {
  .vxe-table {
    height: calc(100vh - 332px);
  }
  .vxe-table--body-wrapper {
    height: calc(100vh - 376px);
  }
  .fixed-left--wrapper,
  .fixed-right--wrapper {
    height: calc(100vh - 385px);
  }
}
::v-deep .table-container-full {
  .vxe-table {
    height: calc(100vh - 254px);
  }
  .vxe-table--body-wrapper {
    height: calc(100vh - 298px);
  }
  .fixed-left--wrapper,
  .fixed-right--wrapper {
    height: calc(100vh - 307px);
  }
}
.preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .audio-player {
    display: block;
  }
}
.upload-file-uploader {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
.right-menu {
  font-size: 13px;
  position: fixed;
  background: rgba(255, 255, 255);
  border: solid 1px rgba(0,0,0,0.2);
  box-shadow: 0 0.5em 1em rgba(0,0,0,0.1) ;
  border-radius: 3px;
  z-index: 1500;
  display: none;
}
.right-menu a {
  width: 90px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #a45eff;
  display: block;
  text-decoration: none;
}
.right-menu a:hover {
  background: rgba(246, 240, 240, 0.84);
  color: #fa5e75;
}
</style>
